<template>
  <el-button type="primary" @click="resetMap" :loading="loading">重置</el-button>
  <div ref="mapChart" style="width: 100%; height: 400px"></div>
</template>

<script setup>
import axios from 'axios'
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import { queryPatrolAlarmLocationByOrgId } from '@/api/monitorApi'
import { useRoute } from 'vue-router'
import { useBaseParamStore } from '@/stores/baseParams'

const baseParamStore = useBaseParamStore()
const route = useRoute()
const mapChart = ref(null)
const initMyChart = ref()
const initAdCode = ref(100000) // 默认地图的编码
const currentMapName = ref('中国') // 默认地图的名称
const adCodeMap = ref([]) // 当前选中省市区的所有名称和编码
const loading = ref(false)
const mapLevel = ref(0) // 0 表示中国，1 表示省份，2 表示城市

onMounted(() => {
  getPatrolAlarmLocationByOrgId()
  initMyChart.value = echarts.init(mapChart.value)
})

// 本月告警单、巡查任务统计地图
const loactionInfo = ref()
const getPatrolAlarmLocationByOrgId = async (adCode = 100000) => {
  try {
    const res = await queryPatrolAlarmLocationByOrgId({
      orgId: route.query.orgId,
      startDate: baseParamStore.baseParam?.pickTime[0],
      endDate: baseParamStore.baseParam?.pickTime[1],
      city: currentMapName.value == '中国' ? '温氏' : '温氏'
    })
    if (res && res.data) {
      loactionInfo.value = res.data
      getMapData(adCode)
    }
  } catch (error) {
    console.error('获取本月告警单、巡查任务统计地图信息失败:', error)
  }
}

// 初始化
const initChart = (mapName, mapData, dotData = []) => {
  dotData = dotData.map((item) => {
    return {
      name: item.address,
      value: [item.longitude, item.latitude]
    }
  })
  console.log('dotData', dotData)
  echarts.registerMap(mapName, mapData)
  var option
  option = {
    geo: {
      map: mapName,
      zoom: '1.5', // 当前视角的缩放比例
      roam: true, // 可以通过鼠标滚轮放大缩小地图
      center: undefined // 中心点偏移量
    },
    series: [
      {
        type: 'map',
        map: mapName, // 注册地图的名称
        zoom: '1.5', // 当前视角的缩放比例
        center: undefined, // 中心点偏移量
        label: {
          show: true // 是否显示省份名字
        },
        data: [],
        roam: true, // 是否开启缩放和平移
        itemStyle: {
          borderColor: '#F59A23',
          borderType: 'dashed'
        },
        emphasis: {
          areaColor: '#184cff',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 5,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: dotData,
        symbolSize: 5, // 控制散点的大小
        label: {
          show: false // 不显示标点上的标签，避免重叠
        },
        itemStyle: {
          color: 'red'
        }
        // emphasis: {
        //   itemStyle: {
        //     color: '#FF5733' // 鼠标悬停时的标点颜色
        //   }
        // }
      }
    ]
  }

  // option = {
  //   geo: {
  //     map: mapName,
  //     roam: true // 可以通过鼠标滚轮放大缩小地图
  //   },
  //   series: [
  //     {
  //       type: 'map',
  //       map: mapName, // 注册地图的名称
  //       roam: true,
  //       zoom: 1.5,
  //       showLegendSymbol: false,
  //       label: {
  //         normal: {
  //           show: true
  //         },
  //         emphasis: {
  //           show: true
  //         }
  //       },
  //       itemStyle: {
  //         normal: {
  //           areaColor: '#0d7090',
  //           borderColor: '#389dff',
  //           borderWidth: 0.5
  //         },
  //         emphasis: {
  //           areaColor: '#fff'
  //         }
  //       },
  //       // 添加 click 事件
  //       emphasis: {
  //         itemStyle: {
  //           areaColor: '#17008d',
  //           shadowOffsetX: 0,
  //           shadowOffsetY: 0,
  //           shadowBlur: 5,
  //           borderWidth: 0,
  //           shadowColor: 'rgba(0, 0, 0, 0.5)'
  //         }
  //       }
  //     },
  //     {
  //       name: '',
  //       type: 'scatter',
  //       coordinateSystem: 'geo',
  //       data: dotData,
  //       symbol: 'circle',
  //       symbolSize: 8,
  //       hoverSymbolSize: 10,
  //       encode: {
  //         value: 2
  //       },
  //       label: {
  //         formatter: '{b}',
  //         position: 'right',
  //         show: false
  //       },
  //       itemStyle: {
  //         color: '#0efacc'
  //       },
  //       emphasis: {
  //         label: {
  //           show: false
  //         }
  //       }
  //     }
  //   ]
  // }
  console.log('option', option)
  option && initMyChart.value.setOption(option)

  // 省份下钻点击事件
  initMyChart.value.on('click', (params) => {
    console.log(params)
    const adCode = adCodeMap.value.find((item) => item.name == params.name).dcode
    console.log('adCode', adCode)
    // 判断是否可以继续下钻
    if (mapLevel.value >= 1) {
      console.log('已达到最大下钻层级')
      return
    }
    if (adCode) {
      currentMapName.value = params.name
      getPatrolAlarmLocationByOrgId(adCode)
      mapLevel.value += 1 // 下钻层级递增
    }
  })
}

// 获取地图数据
const getMapData = (map) => {
  axios
    .get(`https://geo.datav.aliyun.com/areas_v3/bound/${map}_full.json`)
    .then((res) => {
      if (res.status == '200') {
        loading.value = false
        initChart(currentMapName.value, res.data, loactionInfo.value)
        // 获取当前选中的省市区的所有名称和编码
        adCodeMap.value = []
        for (let i = 0; i < res.data.features.length; i++) {
          adCodeMap.value.push({
            name: res.data.features[i].properties.name,
            dcode: res.data.features[i].properties.adcode
          })
        }
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

const resetMap = () => {
  loading.value = true
  initAdCode.value = 100000
  currentMapName.value = '中国'
  mapLevel.value = 0 // 下钻层级重置
  getMapData(initAdCode.value)
  getPatrolAlarmLocationByOrgId()
}
</script>
